<template>
	<view class="topic_Content" :style="setStyle">
		<view class="topic_item" v-for="(item,index) in topicList" :key="index" @tap="navTopic(item.topic_name,item.topic_id)">
			<view class="topic_name">#{{item.topic_name}}</view>
			<view class="topic_num" v-if="item.readnum < 10000">{{item.readnum}}</view>
			<view class="topic_num" v-else-if="item.readnum >= 10000 && item.readnum < 100000000">{{item.readnum}}w</view>
			<view class="topic_num" v-else>{{item.readnum}}亿</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				topicList: [],
				setStyle: 0
			}
		},
		props:{
			setheight: Number
		},
		created() {
			this.setStyle = `bottom:${this.setheight}px;`;
			this.getHistory();
		},
		methods: {
			/* 获取历史话题列表 */
			getHistory() {
				var data = {
					page: 1,
					pagesize: 6
				}
				this.$api.apiPost('user/video.Lists/TopicListLog',data).then(res=>{
					if(res.data.code == 200) {
						this.topicList = res.data.data.data;
						var total = res.data.data.total;
						if(total < 6) {
							var pagesize = Number(6-total);
							this.getTopic(pagesize);
						}
					} else {
						this.getTopic(6);
					}
				})
			},
			/* 获取所有话题列表 */
			getTopic(pagesize) {
				var data = {
					page: 1,
					pagesize: pagesize
				}
				this.$api.apiPost('user/video.Lists/TopicList',data).then(res=>{
					if(res.data.code == 200) {
						var list = res.data.data.data;
						this.topicList = this.topicList.concat(list);
					} else {
						this.topicList = [];
					}
				})
			},
			navTopic(topic_name,topic_id) {
				var val = {}
				val.topic_name = topic_name;
				val.topic_id = topic_id;
				this.$emit('setTopicText',val)
			}
		},
		watch:{
			setheight:{
				immediate:true,
				handler(val){
					this.setStyle = `bottom:${val}px;`;
				}
			}
		}
	}
</script>

<style>
	.topic_Content{
		position: fixed;
		left: 0;
		width: 100%;
		background: rgba(0,0,0,0.5);
		z-index: 9;
	}
	.topic_item{
		margin: 30upx 30upx 10upx 60upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.topic_name{
		color: #FFFFFF;
		font-size: 30upx;
	}
	.topic_num{
		color: #FFFFFF;
		font-size: 26upx;
	}
</style>
